<template>
    <div id="doctpl">
        <div id="docNav">
            <div class="docNavItem">
                <a href="#preview">top</a>
            </div>
            <center>
                --
            </center>

            <template v-for="(k,v) in list">
                <div class="docNavItem">
                    <a :href="'#'+k.apiName">{{k.apiName}}</a>
                </div>
            </template>
        </div>
        <div id="docContent">
            <template v-for="(k,v) in list">
                <div class="oneScreen">
                    <a :name="k.apiName" class="apiName">{{k.apiName}}</a>
                    <br>
                    uri:
                    <p>
                        {{k.uri}}
                    </p>
                    request method
                    <p>
                        {{k.selectedHttpMethod}}
                    </p>
                    request content type:
                    <p>
                        {{k.selectedRequestContentType.value}}
                    </p>
                    <br>
                    request body:
                    <p>
                        {{k.textRequest}}
                    </p>

                    <br>
                    response HTTP code:
                    <p>
                        {{k.responseHttpCode.value}}
                    </p>
                    response content type:
                    <p>
                        {{k.selectedResponseContentType.value}}
                    </p>
                    <br>
                    response body:
                    <p>
                        {{k.textResponse}}
                    </p>

                    <br>
                    create date:
                    <p>
                        {{k.createtime}}
                    </p>
                    update date:
                    <p>
                        {{k.updateTime}}
                    </p>

                </div>
            </template>
        </div>
    </div>

</template>

<script>
    export default {
        name:'doctpl',
        data(){
            return {
                apilist:[
                    {apiName:"1",content:"1xxx"},
                    {apiName:"2",content:"2xxx"},
                    {apiName:"3",content:"3xxx"},
                    {apiName:"4",content:"4xxx"},
                    {apiName:"5",content:"5xxx"}
                ]
            }
        },
        computed:{
            list(){return this.$store.state.apilist}
        }
    }
</script>

<style>
    #doctpl{
        width:100%;
        height:85%;
        /* border:solid 1px blue; */
    }
    #docNav{
        position:fixed;
        margin-top:2%;
        width:11%;
        height:100%;
        float:left;
    }
    .docNavItem{
        display:block;
        width:100%;
        height:20px;
    }

    .docNavItem a{
        text-align:center;
        height:100%;
        background-color: #eee;
        color: black;
        display: block;
        text-decoration: none;
    }
    .docNavItem a:hover{
        text-decoration:underline;
        background-color: #ccc;
    }

    #docContent{
        /* left:11%; */
        float:right;
        width:88%;
        height:100%;
        /* border:solid 1px grey; */
    }

    #docContent p{
        background-color: lightgrey;
        /* display:inline; */
    }
    .oneScreen{
        height: 100vh;
        width:90%;
        margin-bottom:10px;
        /* border:solid 1px blue; */
    }
    .apiName{
        width:100%;
        height:30px;
        background-color:#ccc;
        display:block;
    }
</style>
